<template>
    <div>


        <div class="tag-group">
            <span class="tag-box-1 tag-1"></span>
            <div class="tag-group-text">营业收入增长率</div>
            <span class="tag-box-2 tag-2 tag-r"></span>
            <div class="tag-group-text">营业收入(亿)</div>
        </div>

        <div id="Chart8" :style="{width: '100%', height: '300px'}"></div>

        <table border="1" bordercolor="#E6E7E8">
            <tr>
                <th></th>
                <th v-for="item in chartData">{{ item.year }}年报</th>
            </tr>
            <tr>
                <td>
                    <span class="tar-box-1 tar-1"></span>
                </td>
                <td v-for="item in chartData" :class="(item.increaseScale * 100) > 0 ?  'up': 'down'">{{ item.increaseScale | Scale }}%</td>
            </tr>
            <tr>
                <td>
                    <span class="tar-box-2 tar-2"></span>
                </td>
                <td v-for="item in chartData">{{ item.revenue | priceTo }}亿</td>
            </tr>
        </table>
    </div>
</template>

<script>

    import {industryPosition} from "../../api/index";

    export default {
        name: "echart8",
        data(){
            return {
                chartData: []
            }
        },
        filters: {
            priceTo(val){
                return (val / 10000).toFixed(2)
            },
            Scale(val){
                return (val * 100).toFixed(2)
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init() {
                let tscode = this.$route.query.tscode;
                let Chart = this.$echarts.init(document.getElementById('Chart8'));

                let increaseScaleArr = [];
                let revenueArr = [];
                let yearArr = [];

                await industryPosition(tscode).then(res => {
                    this.chartData = res;

                    res.forEach(item=>{
                        revenueArr.push(parseFloat((item. revenue / 10000).toFixed(2)));
                        increaseScaleArr.push(parseFloat((item.increaseScale * 100).toFixed(2)));
                        yearArr.push(item.year);
                    });

                    let option = {
                        height: '210px',
                        color: '#6467F0',
                        grid: {
                        },
                        /*legend: {
                            data: [
                                {
                                    name: '营业收入(亿)',
                                    icon:'image:///static/1.png',
                                    textStyle: {
                                        color: '#333'
                                    }
                                },
                                {
                                    name: '营业收入增长率',
                                    icon:'image:///static/2.png',
                                    textStyle: {
                                        color: '#333'
                                    }
                                }
                            ],
                            left: '0',
                            top: '0',
                        },*/
                        xAxis: {
                            data: yearArr
                        },
                        yAxis: [
                            {
                                name: '营业收入(亿)',
                                type: 'value',
                                nameTextStyle: {
                                    padding: [0, 2, 0, 0]    // 四个数字分别为上右下左与原位置距离
                                },
                                position: 'right',
                                axisLabel: {
                                    formatter: '{value}'
                                },
                                axisLine:{
                                    show: false,
                                    lineStyle: {
                                        color: '#999999'
                                    }
                                }
                            },
                            {
                                name: '营业收入增长率',
                                type: 'value',
                                nameTextStyle: {
                                    padding: [0, 0, 0, 20]    // 四个数字分别为上右下左与原位置距离
                                },
                                position: 'left',
                                axisLabel: {
                                    formatter: '{value}%'
                                },
                                axisLine:{
                                    show: false,
                                    lineStyle: {
                                        color: '#999999'
                                    }
                                },
                                splitLine: false
                            }
                        ],
                        series: [
                            {
                                name: '营业收入(亿)',
                                type: 'bar',
                                data: revenueArr,
                                barWidth: '20px'
                            },
                            {
                                name: '营业收入增长率',
                                data: increaseScaleArr,
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#FA5151'
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#FA5151'
                                    }
                                },
                                areaStyle: {
                                    color: '#FA5151',
                                    opacity: 0.1
                                }
                            },

                        ]
                    };

                    Chart.setOption(option);
                });
            }
        }
    }
</script>

<style scoped lang="less">
    table{
        margin-top: 14px;
        width: 100%;
        font-size: 12px;
        font-weight: 500;
        zoom: 0.95;

        th,td{
            height: 30px;
            line-height: 30px;
        }
    }

</style>
